|
1
|
|
|
if (typeof(PhpDebugBar) == 'undefined') { |
|
|
|
|
|
|
2
|
|
|
// namespace |
|
3
|
|
|
var PhpDebugBar = {}; |
|
4
|
|
|
PhpDebugBar.$ = jQuery; |
|
5
|
|
|
} |
|
6
|
|
|
|
|
7
|
|
|
(function($) { |
|
8
|
|
|
|
|
9
|
|
|
/** |
|
10
|
|
|
* @namespace |
|
11
|
|
|
*/ |
|
12
|
|
|
PhpDebugBar.Widgets = {}; |
|
|
|
|
|
|
13
|
|
|
|
|
14
|
|
|
/** |
|
15
|
|
|
* Replaces spaces with and line breaks with <br> |
|
16
|
|
|
* |
|
17
|
|
|
* @param {String} text |
|
18
|
|
|
* @return {String} |
|
19
|
|
|
*/ |
|
20
|
|
|
var htmlize = PhpDebugBar.Widgets.htmlize = function(text) { |
|
21
|
|
|
return text.replace(/\n/g, '<br>').replace(/\s/g, " ") |
|
22
|
|
|
}; |
|
23
|
|
|
|
|
24
|
|
|
/** |
|
25
|
|
|
* Returns a string representation of value, using JSON.stringify |
|
26
|
|
|
* if it's an object. |
|
27
|
|
|
* |
|
28
|
|
|
* @param {Object} value |
|
29
|
|
|
* @param {Boolean} prettify Uses htmlize() if true |
|
30
|
|
|
* @return {String} |
|
31
|
|
|
*/ |
|
32
|
|
|
var renderValue = PhpDebugBar.Widgets.renderValue = function(value, prettify) { |
|
|
|
|
|
|
33
|
|
|
if (typeof(value) !== 'string') { |
|
34
|
|
|
if (prettify) { |
|
35
|
|
|
return htmlize(JSON.stringify(value, undefined, 2)); |
|
36
|
|
|
} |
|
37
|
|
|
return JSON.stringify(value); |
|
38
|
|
|
} |
|
39
|
|
|
return value; |
|
40
|
|
|
}; |
|
41
|
|
|
|
|
42
|
|
|
/** |
|
43
|
|
|
* Highlights a block of code |
|
44
|
|
|
* |
|
45
|
|
|
* @param {String} code |
|
46
|
|
|
* @param {String} lang |
|
47
|
|
|
* @return {String} |
|
48
|
|
|
*/ |
|
49
|
|
|
var highlight = PhpDebugBar.Widgets.highlight = function(code, lang) { |
|
|
|
|
|
|
50
|
|
|
if (typeof(code) === 'string') { |
|
51
|
|
|
if (typeof(hljs) === 'undefined') { |
|
|
|
|
|
|
52
|
|
|
return htmlize(code); |
|
53
|
|
|
} |
|
54
|
|
|
if (lang) { |
|
55
|
|
|
return hljs.highlight(lang, code).value; |
|
56
|
|
|
} |
|
57
|
|
|
return hljs.highlightAuto(code).value; |
|
58
|
|
|
} |
|
59
|
|
|
|
|
60
|
|
|
if (typeof(hljs) === 'object') { |
|
61
|
|
|
code.each(function(i, e) { hljs.highlightBlock(e); }); |
|
|
|
|
|
|
62
|
|
|
} |
|
63
|
|
|
return code; |
|
64
|
|
|
}; |
|
65
|
|
|
|
|
66
|
|
|
/** |
|
67
|
|
|
* Creates a <pre> element with a block of code |
|
68
|
|
|
* |
|
69
|
|
|
* @param {String} code |
|
70
|
|
|
* @param {String} lang |
|
71
|
|
|
* @return {String} |
|
72
|
|
|
*/ |
|
73
|
|
|
var createCodeBlock = PhpDebugBar.Widgets.createCodeBlock = function(code, lang) { |
|
|
|
|
|
|
74
|
|
|
var pre = $('<pre />'); |
|
75
|
|
|
$('<code />').text(code).appendTo(pre); |
|
76
|
|
|
if (lang) { |
|
77
|
|
|
pre.addClass("language-" + lang); |
|
78
|
|
|
} |
|
79
|
|
|
highlight(pre); |
|
80
|
|
|
return pre; |
|
81
|
|
|
}; |
|
82
|
|
|
|
|
83
|
|
|
var csscls = PhpDebugBar.utils.makecsscls('phpdebugbar-widgets-'); |
|
|
|
|
|
|
84
|
|
|
|
|
85
|
|
|
|
|
86
|
|
|
// ------------------------------------------------------------------ |
|
87
|
|
|
// Generic widgets |
|
88
|
|
|
// ------------------------------------------------------------------ |
|
89
|
|
|
|
|
90
|
|
|
/** |
|
91
|
|
|
* Displays array element in a <ul> list |
|
92
|
|
|
* |
|
93
|
|
|
* Options: |
|
94
|
|
|
* - data |
|
95
|
|
|
* - itemRenderer: a function used to render list items (optional) |
|
96
|
|
|
*/ |
|
97
|
|
|
var ListWidget = PhpDebugBar.Widgets.ListWidget = PhpDebugBar.Widget.extend({ |
|
98
|
|
|
|
|
99
|
|
|
tagName: 'ul', |
|
100
|
|
|
|
|
101
|
|
|
className: csscls('list'), |
|
102
|
|
|
|
|
103
|
|
|
initialize: function(options) { |
|
104
|
|
|
if (!options['itemRenderer']) { |
|
105
|
|
|
options['itemRenderer'] = this.itemRenderer; |
|
106
|
|
|
} |
|
107
|
|
|
this.set(options); |
|
108
|
|
|
}, |
|
109
|
|
|
|
|
110
|
|
|
render: function() { |
|
111
|
|
|
this.bindAttr(['itemRenderer', 'data'], function() { |
|
112
|
|
|
this.$el.empty(); |
|
113
|
|
|
if (!this.has('data')) { |
|
114
|
|
|
return; |
|
115
|
|
|
} |
|
116
|
|
|
|
|
117
|
|
|
var data = this.get('data'); |
|
118
|
|
|
for (var i = 0; i < data.length; i++) { |
|
119
|
|
|
var li = $('<li />').addClass(csscls('list-item')).appendTo(this.$el); |
|
120
|
|
|
this.get('itemRenderer')(li, data[i]); |
|
121
|
|
|
} |
|
122
|
|
|
}); |
|
123
|
|
|
}, |
|
124
|
|
|
|
|
125
|
|
|
/** |
|
126
|
|
|
* Renders the content of a <li> element |
|
127
|
|
|
* |
|
128
|
|
|
* @param {jQuery} li The <li> element as a jQuery Object |
|
129
|
|
|
* @param {Object} value An item from the data array |
|
130
|
|
|
*/ |
|
131
|
|
|
itemRenderer: function(li, value) { |
|
132
|
|
|
li.html(renderValue(value)); |
|
133
|
|
|
} |
|
134
|
|
|
|
|
135
|
|
|
}); |
|
136
|
|
|
|
|
137
|
|
|
// ------------------------------------------------------------------ |
|
138
|
|
|
|
|
139
|
|
|
/** |
|
140
|
|
|
* Displays object property/value paris in a <dl> list |
|
141
|
|
|
* |
|
142
|
|
|
* Options: |
|
143
|
|
|
* - data |
|
144
|
|
|
* - itemRenderer: a function used to render list items (optional) |
|
145
|
|
|
*/ |
|
146
|
|
|
var KVListWidget = PhpDebugBar.Widgets.KVListWidget = ListWidget.extend({ |
|
|
|
|
|
|
147
|
|
|
|
|
148
|
|
|
tagName: 'dl', |
|
149
|
|
|
|
|
150
|
|
|
className: csscls('kvlist'), |
|
151
|
|
|
|
|
152
|
|
|
render: function() { |
|
153
|
|
|
this.bindAttr(['itemRenderer', 'data'], function() { |
|
154
|
|
|
this.$el.empty(); |
|
155
|
|
|
if (!this.has('data')) { |
|
156
|
|
|
return; |
|
157
|
|
|
} |
|
158
|
|
|
|
|
159
|
|
|
var self = this; |
|
160
|
|
|
$.each(this.get('data'), function(key, value) { |
|
161
|
|
|
var dt = $('<dt />').addClass(csscls('key')).appendTo(self.$el); |
|
162
|
|
|
var dd = $('<dd />').addClass(csscls('value')).appendTo(self.$el); |
|
163
|
|
|
self.get('itemRenderer')(dt, dd, key, value); |
|
164
|
|
|
}); |
|
165
|
|
|
}); |
|
166
|
|
|
}, |
|
167
|
|
|
|
|
168
|
|
|
/** |
|
169
|
|
|
* Renders the content of the <dt> and <dd> elements |
|
170
|
|
|
* |
|
171
|
|
|
* @param {jQuery} dt The <dt> element as a jQuery Object |
|
172
|
|
|
* @param {jQuery} dd The <dd> element as a jQuery Object |
|
173
|
|
|
* @param {String} key Property name |
|
174
|
|
|
* @param {Object} value Property value |
|
175
|
|
|
*/ |
|
176
|
|
|
itemRenderer: function(dt, dd, key, value) { |
|
177
|
|
|
dt.text(key); |
|
178
|
|
|
dd.html(htmlize(value)); |
|
179
|
|
|
} |
|
180
|
|
|
|
|
181
|
|
|
}); |
|
182
|
|
|
|
|
183
|
|
|
// ------------------------------------------------------------------ |
|
184
|
|
|
|
|
185
|
|
|
/** |
|
186
|
|
|
* An extension of KVListWidget where the data represents a list |
|
187
|
|
|
* of variables |
|
188
|
|
|
* |
|
189
|
|
|
* Options: |
|
190
|
|
|
* - data |
|
191
|
|
|
*/ |
|
192
|
|
|
var VariableListWidget = PhpDebugBar.Widgets.VariableListWidget = KVListWidget.extend({ |
|
|
|
|
|
|
193
|
|
|
|
|
194
|
|
|
className: csscls('kvlist varlist'), |
|
195
|
|
|
|
|
196
|
|
|
itemRenderer: function(dt, dd, key, value) { |
|
197
|
|
|
$('<span />').attr('title', key).text(key).appendTo(dt); |
|
198
|
|
|
|
|
199
|
|
|
var v = value; |
|
200
|
|
|
if (v && v.length > 100) { |
|
201
|
|
|
v = v.substr(0, 100) + "..."; |
|
202
|
|
|
} |
|
203
|
|
|
var prettyVal = null; |
|
204
|
|
|
dd.text(v).click(function() { |
|
205
|
|
|
if (dd.hasClass(csscls('pretty'))) { |
|
206
|
|
|
dd.text(v).removeClass(csscls('pretty')); |
|
207
|
|
|
} else { |
|
208
|
|
|
prettyVal = prettyVal || createCodeBlock(value); |
|
209
|
|
|
dd.addClass(csscls('pretty')).empty().append(prettyVal); |
|
210
|
|
|
} |
|
211
|
|
|
}); |
|
212
|
|
|
} |
|
213
|
|
|
|
|
214
|
|
|
}); |
|
215
|
|
|
|
|
216
|
|
|
// ------------------------------------------------------------------ |
|
217
|
|
|
|
|
218
|
|
|
/** |
|
219
|
|
|
* Iframe widget |
|
220
|
|
|
* |
|
221
|
|
|
* Options: |
|
222
|
|
|
* - data |
|
223
|
|
|
*/ |
|
224
|
|
|
var IFrameWidget = PhpDebugBar.Widgets.IFrameWidget = PhpDebugBar.Widget.extend({ |
|
|
|
|
|
|
225
|
|
|
|
|
226
|
|
|
tagName: 'iframe', |
|
227
|
|
|
|
|
228
|
|
|
className: csscls('iframe'), |
|
229
|
|
|
|
|
230
|
|
|
render: function() { |
|
231
|
|
|
this.$el.attr({ |
|
232
|
|
|
seamless: "seamless", |
|
233
|
|
|
border: "0", |
|
234
|
|
|
width: "100%", |
|
235
|
|
|
height: "100%" |
|
236
|
|
|
}); |
|
237
|
|
|
this.bindAttr('data', function(url) { this.$el.attr('src', url); }); |
|
238
|
|
|
} |
|
239
|
|
|
|
|
240
|
|
|
}); |
|
241
|
|
|
|
|
242
|
|
|
|
|
243
|
|
|
// ------------------------------------------------------------------ |
|
244
|
|
|
// Collector specific widgets |
|
245
|
|
|
// ------------------------------------------------------------------ |
|
246
|
|
|
|
|
247
|
|
|
/** |
|
248
|
|
|
* Widget for the MessagesCollector |
|
249
|
|
|
* |
|
250
|
|
|
* Uses ListWidget under the hood |
|
251
|
|
|
* |
|
252
|
|
|
* Options: |
|
253
|
|
|
* - data |
|
254
|
|
|
*/ |
|
255
|
|
|
var MessagesWidget = PhpDebugBar.Widgets.MessagesWidget = PhpDebugBar.Widget.extend({ |
|
|
|
|
|
|
256
|
|
|
|
|
257
|
|
|
className: csscls('messages'), |
|
258
|
|
|
|
|
259
|
|
|
render: function() { |
|
260
|
|
|
var self = this; |
|
261
|
|
|
|
|
262
|
|
|
this.$list = new ListWidget({ itemRenderer: function(li, value) { |
|
263
|
|
|
var m = value.message; |
|
264
|
|
|
if (m.length > 100) { |
|
265
|
|
|
m = m.substr(0, 100) + "..."; |
|
266
|
|
|
} |
|
267
|
|
|
|
|
268
|
|
|
var val = $('<span />').addClass(csscls('value')).text(m).appendTo(li); |
|
269
|
|
|
if (!value.is_string || value.message.length > 100) { |
|
270
|
|
|
var prettyVal = value.message; |
|
271
|
|
|
if (!value.is_string) { |
|
272
|
|
|
prettyVal = null; |
|
273
|
|
|
} |
|
274
|
|
|
li.css('cursor', 'pointer').click(function() { |
|
275
|
|
|
if (val.hasClass(csscls('pretty'))) { |
|
276
|
|
|
val.text(m).removeClass(csscls('pretty')); |
|
277
|
|
|
} else { |
|
278
|
|
|
prettyVal = prettyVal || createCodeBlock(value.message, 'php'); |
|
279
|
|
|
val.addClass(csscls('pretty')).empty().append(prettyVal); |
|
280
|
|
|
} |
|
281
|
|
|
}); |
|
282
|
|
|
} |
|
283
|
|
|
|
|
284
|
|
|
if (value.label) { |
|
285
|
|
|
val.addClass(csscls(value.label)); |
|
286
|
|
|
$('<span />').addClass(csscls('label')).text(value.label).appendTo(li); |
|
287
|
|
|
} |
|
288
|
|
|
if (value.collector) { |
|
289
|
|
|
$('<span />').addClass(csscls('collector')).text(value.collector).appendTo(li); |
|
290
|
|
|
} |
|
291
|
|
|
}}); |
|
292
|
|
|
|
|
293
|
|
|
this.$list.$el.appendTo(this.$el); |
|
294
|
|
|
this.$toolbar = $('<div><i class="phpdebugbar-fa phpdebugbar-fa-search"></i></div>').addClass(csscls('toolbar')).appendTo(this.$el); |
|
295
|
|
|
|
|
296
|
|
|
$('<input type="text" />') |
|
297
|
|
|
.on('change', function() { self.set('search', this.value); }) |
|
298
|
|
|
.appendTo(this.$toolbar); |
|
299
|
|
|
|
|
300
|
|
|
this.bindAttr('data', function(data) { |
|
301
|
|
|
this.set({ exclude: [], search: '' }); |
|
302
|
|
|
this.$toolbar.find(csscls('.filter')).remove(); |
|
303
|
|
|
|
|
304
|
|
|
var filters = [], self = this; |
|
305
|
|
|
for (var i = 0; i < data.length; i++) { |
|
306
|
|
|
if (!data[i].label || $.inArray(data[i].label, filters) > -1) { |
|
307
|
|
|
continue; |
|
308
|
|
|
} |
|
309
|
|
|
filters.push(data[i].label); |
|
310
|
|
|
$('<a />') |
|
311
|
|
|
.addClass(csscls('filter')) |
|
312
|
|
|
.text(data[i].label) |
|
313
|
|
|
.attr('rel', data[i].label) |
|
314
|
|
|
.on('click', function() { self.onFilterClick(this); }) |
|
315
|
|
|
.appendTo(this.$toolbar); |
|
316
|
|
|
} |
|
317
|
|
|
}); |
|
318
|
|
|
|
|
319
|
|
|
this.bindAttr(['exclude', 'search'], function() { |
|
320
|
|
|
var data = this.get('data'), |
|
321
|
|
|
exclude = this.get('exclude'), |
|
322
|
|
|
search = this.get('search'), |
|
323
|
|
|
caseless = false, |
|
324
|
|
|
fdata = []; |
|
325
|
|
|
|
|
326
|
|
|
if (search && search === search.toLowerCase()) { |
|
327
|
|
|
caseless = true; |
|
328
|
|
|
} |
|
329
|
|
|
|
|
330
|
|
|
for (var i = 0; i < data.length; i++) { |
|
331
|
|
|
var message = caseless ? data[i].message.toLowerCase() : data[i].message; |
|
332
|
|
|
|
|
333
|
|
|
if ((!data[i].label || $.inArray(data[i].label, exclude) === -1) && (!search || message.indexOf(search) > -1)) { |
|
334
|
|
|
fdata.push(data[i]); |
|
335
|
|
|
} |
|
336
|
|
|
} |
|
337
|
|
|
|
|
338
|
|
|
this.$list.set('data', fdata); |
|
339
|
|
|
}); |
|
340
|
|
|
}, |
|
341
|
|
|
|
|
342
|
|
|
onFilterClick: function(el) { |
|
343
|
|
|
$(el).toggleClass(csscls('excluded')); |
|
344
|
|
|
|
|
345
|
|
|
var excludedLabels = []; |
|
346
|
|
|
this.$toolbar.find(csscls('.filter') + csscls('.excluded')).each(function() { |
|
347
|
|
|
excludedLabels.push(this.rel); |
|
348
|
|
|
}); |
|
349
|
|
|
|
|
350
|
|
|
this.set('exclude', excludedLabels); |
|
351
|
|
|
} |
|
352
|
|
|
|
|
353
|
|
|
}); |
|
354
|
|
|
|
|
355
|
|
|
// ------------------------------------------------------------------ |
|
356
|
|
|
|
|
357
|
|
|
/** |
|
358
|
|
|
* Widget for the TimeDataCollector |
|
359
|
|
|
* |
|
360
|
|
|
* Options: |
|
361
|
|
|
* - data |
|
362
|
|
|
*/ |
|
363
|
|
|
var TimelineWidget = PhpDebugBar.Widgets.TimelineWidget = PhpDebugBar.Widget.extend({ |
|
|
|
|
|
|
364
|
|
|
|
|
365
|
|
|
tagName: 'ul', |
|
366
|
|
|
|
|
367
|
|
|
className: csscls('timeline'), |
|
368
|
|
|
|
|
369
|
|
|
render: function() { |
|
370
|
|
|
this.bindAttr('data', function(data) { |
|
371
|
|
|
this.$el.empty(); |
|
372
|
|
|
if (data.measures) { |
|
373
|
|
|
for (var i = 0; i < data.measures.length; i++) { |
|
374
|
|
|
var measure = data.measures[i]; |
|
375
|
|
|
var m = $('<div />').addClass(csscls('measure')), |
|
376
|
|
|
li = $('<li />'), |
|
377
|
|
|
left = (measure.relative_start * 100 / data.duration).toFixed(2), |
|
378
|
|
|
width = Math.min((measure.duration * 100 / data.duration).toFixed(2), 100 - left); |
|
379
|
|
|
|
|
380
|
|
|
m.append($('<span />').addClass(csscls('value')).css({ |
|
381
|
|
|
left: left + "%", |
|
382
|
|
|
width: width + "%" |
|
383
|
|
|
})); |
|
384
|
|
|
m.append($('<span />').addClass(csscls('label')).text(measure.label + " (" + measure.duration_str + ")")); |
|
385
|
|
|
|
|
386
|
|
|
if (measure.collector) { |
|
387
|
|
|
$('<span />').addClass(csscls('collector')).text(measure.collector).appendTo(m); |
|
388
|
|
|
} |
|
389
|
|
|
|
|
390
|
|
|
m.appendTo(li); |
|
391
|
|
|
this.$el.append(li); |
|
392
|
|
|
|
|
393
|
|
|
if (measure.params && !$.isEmptyObject(measure.params)) { |
|
394
|
|
|
var table = $('<table><tr><th colspan="2">Params</th></tr></table>').addClass(csscls('params')).appendTo(li); |
|
395
|
|
|
for (var key in measure.params) { |
|
|
|
|
|
|
396
|
|
|
if (typeof measure.params[key] !== 'function') { |
|
397
|
|
|
table.append('<tr><td class="' + csscls('name') + '">' + key + '</td><td class="' + csscls('value') + |
|
398
|
|
|
'"><pre><code>' + measure.params[key] + '</code></pre></td></tr>'); |
|
399
|
|
|
} |
|
400
|
|
|
} |
|
401
|
|
|
li.css('cursor', 'pointer').click(function() { |
|
402
|
|
|
var table = $(this).find('table'); |
|
403
|
|
|
if (table.is(':visible')) { |
|
404
|
|
|
table.hide(); |
|
405
|
|
|
} else { |
|
406
|
|
|
table.show(); |
|
407
|
|
|
} |
|
408
|
|
|
}); |
|
409
|
|
|
} |
|
410
|
|
|
} |
|
411
|
|
|
} |
|
412
|
|
|
}); |
|
413
|
|
|
} |
|
414
|
|
|
|
|
415
|
|
|
}); |
|
416
|
|
|
|
|
417
|
|
|
// ------------------------------------------------------------------ |
|
418
|
|
|
|
|
419
|
|
|
/** |
|
420
|
|
|
* Widget for the displaying exceptions |
|
421
|
|
|
* |
|
422
|
|
|
* Options: |
|
423
|
|
|
* - data |
|
424
|
|
|
*/ |
|
425
|
|
|
var ExceptionsWidget = PhpDebugBar.Widgets.ExceptionsWidget = PhpDebugBar.Widget.extend({ |
|
|
|
|
|
|
426
|
|
|
|
|
427
|
|
|
className: csscls('exceptions'), |
|
428
|
|
|
|
|
429
|
|
|
render: function() { |
|
430
|
|
|
this.$list = new ListWidget({ itemRenderer: function(li, e) { |
|
431
|
|
|
$('<span />').addClass(csscls('message')).text(e.message).appendTo(li); |
|
432
|
|
|
if (e.file) { |
|
433
|
|
|
$('<span />').addClass(csscls('filename')).text(e.file + "#" + e.line).appendTo(li); |
|
434
|
|
|
} |
|
435
|
|
|
if (e.type) { |
|
436
|
|
|
$('<span />').addClass(csscls('type')).text(e.type).appendTo(li); |
|
437
|
|
|
} |
|
438
|
|
|
if (e.surrounding_lines) { |
|
439
|
|
|
var pre = createCodeBlock(e.surrounding_lines.join(""), 'php').addClass(csscls('file')).appendTo(li); |
|
440
|
|
|
li.click(function() { |
|
441
|
|
|
if (pre.is(':visible')) { |
|
442
|
|
|
pre.hide(); |
|
443
|
|
|
} else { |
|
444
|
|
|
pre.show(); |
|
445
|
|
|
} |
|
446
|
|
|
}); |
|
447
|
|
|
} |
|
448
|
|
|
}}); |
|
449
|
|
|
this.$list.$el.appendTo(this.$el); |
|
450
|
|
|
|
|
451
|
|
|
this.bindAttr('data', function(data) { |
|
452
|
|
|
this.$list.set('data', data); |
|
453
|
|
|
if (data.length == 1) { |
|
454
|
|
|
this.$list.$el.children().first().find(csscls('.file')).show(); |
|
455
|
|
|
} |
|
456
|
|
|
}); |
|
457
|
|
|
|
|
458
|
|
|
} |
|
459
|
|
|
|
|
460
|
|
|
}); |
|
461
|
|
|
|
|
462
|
|
|
|
|
463
|
|
|
})(PhpDebugBar.$); |
|
|
|
|
|
|
464
|
|
|
|